<template>
  <div>
    <div>
      <div v-if="addressList?.length" class="flex flex-col gap-[16px]">
        <div class="flex items gap-[8px]" v-for="item in addressList" :key="item.id">
          <div class="flex-1" @click="onClickAddress(item)">
            <div class="text-[#303030] text-[16px] font-[500] flex gap-[16px]">
              <div>
                {{ item.fullName }}
              </div>
              <div>
                {{ item.phone }}
              </div>
            </div>
            <div class="text-[16px] font-[300]">
              {{ item.address }},{{ item.areaText }},{{ item.cityText }},{{
                item.provinceText
              }},{{ item.postCode }}
            </div>
            <div v-if="item.status == 0">
              <span
                class="rounded-[4px] text-[#7ECF2C] font-[300] text-[16px] px-[8px]"
                style="background: rgb(58 207 44 / 15%)"
              >
                {{ $t("common.默认") }}
              </span>
            </div>
          </div>
          <div class="w-[80px] flex flex-col gap-[4px] text-center">
            <div>
              <n-popconfirm
                @positive-click="onClickDeleteAddress(item)"
                :positive-text="$t('button.确定')"
                :negative-text="$t('button.取消')"
              >
                <template #trigger>
                  <n-button size="tiny" quaternary type="error" ghost>
                    {{ $t("button.删除") }}
                  </n-button>
                </template>
                {{ $t("confirm.删除地址") }}
              </n-popconfirm>
            </div>
            <div>
              <n-button
                size="tiny"
                quaternary
                type="info"
                ghost
                @click="onClickEdit(item)"
              >
                {{ $t("button.编辑") }}
              </n-button>
            </div>
            <div v-if="item.status != 0">
              <n-button
                size="tiny"
                quaternary
                type="info"
                ghost
                @click="onClickSetDefault(item)"
              >
                {{ $t("common.默认") }}
              </n-button>
            </div>
          </div>
        </div>
      </div>
      <template v-else>
        <div
          class="w-full mx-auto text-center my-[110px] text-[22px] font-[300] text-[#2f2f2f] leading-[36px]"
        >
          {{ $t("tips.请添加收货地址") }}
        </div>
      </template>
    </div>
    <div class="w-[476px] m-auto mt-[24px]">
      <n-button type="primary" size="large" block @click="onClickAdd">
        {{ $t("button.添加送货地址") }}
      </n-button>
    </div>

    <addAddressDialog
      :type="props.type"
      ref="addAddressDialogRef"
      @reload="getAddressHandler(true)"
    ></addAddressDialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { getUserAddresses, deleteAddress, setDefault } from "@/api/address";
import addAddressDialog from "@/components/addAddressDialog.vue";
const addAddressDialogRef = ref(null);
const addressList = ref([]);
const emit = defineEmits(["onSelectAddress", "onRemoveAddress"]);

const props = defineProps({
  type: {
    type: Number,
    default: 0, //0墨西哥地址  1中国地址
  },
});

const onClickAdd = () => {
  addAddressDialogRef.value.open();
};

const getAddressHandler = async (select) => {
  const { data } = await getUserAddresses();
  addressList.value = data.data?.filter((x) => x.type == props.type);
  if (select && addressList.value.length > 0) {
    onClickAddress(addressList.value[addressList.value.length - 1]);
  }
};
onMounted(() => {
  getAddressHandler();
});

const onClickAddress = (item) => {
  emit("onSelectAddress", item);
};

const onClickDeleteAddress = async (item) => {
  await deleteAddress(item.id);
  await getAddressHandler();
  emit("onRemoveAddress", item);
};

const onClickSetDefault = async (item) => {
  await setDefault(item.id);
  await getAddressHandler();
};

const onClickEdit = async (item) => {
  addAddressDialogRef.value.open(item);
};
</script>

<style lang="scss" scoped>
.items {
  border: 1px solid #aaaaaa;
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  &:hover {
    background: #fffbf6;
    border: 1px solid var(--main-color);
  }
  &::before {
    background: repeating-linear-gradient(
      -45deg,
      #ff976a 0,
      #ff976a 20%,
      transparent 0,
      transparent 25%,
      #1989fa 0,
      #1989fa 45%,
      transparent 0,
      transparent 50%
    );
    content: "";
    background-size: 80px;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
</style>
